<template>
  <div>
    <!-- 自定义指令 -->
    <!-- 使用全局自定义指令 -->
    <!-- <input type="text" v-myfocus placeholder="请输入搜索商品" />
    <button v-permission v-red @click="addUser">添加用户</button>-->
    <!-- <p v-green="'lightgreen'">测试指令传参</p> -->

    <!-- 使用自定义指令进行正则校验 -->
    <input type="text" v-checkphone v-model="phone" />
  </div>
</template>

<script>
// 分为: 全局自定义指令和局部自定义指令
// 全局自定义指令: 注册在全局, 可以在任意一个组件内只用, 无需在注册
// 局部自定义指令: 注册在当前组件内, 只能在当前组件内使用
export default {
  data() {
    return {
      phone: ""
    };
  },
  methods: {
    addUser() {
      console.log("按钮权限");
    }
  },
  directives: {
    red: {
      bind() {},
      inserted(el) {
        el.style.background = "red";
      }
    },
    // green(el, binding) {
    //   // console.log("binding", binding);
    //   el.style.background = binding.value;
    // },
    checkphone(el) {
      //   console.log("this", this);
      // 自定义指令中的this, 并不是指向当前组件的实例对象
      // console.log(this.phone);
      console.log(el.value);
      if (/^1[3-9]\d{9}$/.test(el.value)) {
        el.style.borderColor = "green";
      } else {
        el.style.borderColor = "red";
      }
    }
  }
};
</script>
<style scoped>
input {
  outline: none;
  border: 1px solid black;
}
</style>